<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 安全人员详情 -->
    <a-spin :spinning="spinning" style="position: relative">
      <!-- 员工信息 -->
      <a-card :bordered="false" class="mb12">
        <title-name title="员工信息"></title-name>
        <a-row style="padding: 0 32px">
          <a-col :span="9" v-for="(item, index) in employeesInfoList" :key="index">
            <a-row class="expertEdit_box">
              <a-col :span="4" class="expertEdit_name">{{ item.name }}</a-col>
              <a-col :span="20" class="expertEdit_desc">{{ item.value || '暂无' }}</a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-card>
      <!-- 上课历史 -->
      <a-card :bordered="false" style="margin-bottom: 50px">
        <title-name title="上课历史"></title-name>
        <div style="padding: 0 32px">
          <div align="right" v-if="isExpert">
            <a-button class="mb12" type="primary" @click="visibleHistory = true">增加上课历史</a-button>
          </div>
          <div>
            <a-collapse
              v-if="classHistories && classHistories.length > 0"
              :bordered="false"
              v-model="activeKey"
              expand-icon-position="right"
            >
              <a-collapse-panel :style="customStyle" :showArrow="true" v-for="item in classHistories" :key="item.id">
                <template slot="header">
                  <a-row>
                    <a-col :span="2">
                      <div>课程名称：</div>
                    </a-col>
                    <a-col :span="22">{{ item.subjectName || '暂无' }}</a-col>
                  </a-row>
                </template>
                <a-row class="expertEdit_box">
                  <a-col :span="2">
                    <div class="expertEdit_name">受众：</div>
                  </a-col>
                  <a-col :span="22">
                    <div class="expertEdit_desc">{{ item.swipe || '暂无' }}</div>
                  </a-col>
                </a-row>
                <a-row class="expertEdit_box">
                  <a-col :span="2">
                    <div class="expertEdit_name">备注：</div>
                  </a-col>
                  <a-col :span="22">
                    <div class="expertEdit_desc">{{ item.remarks || '暂无' }}</div>
                  </a-col>
                </a-row>
                <a-row class="expertEdit_box">
                  <a-col :span="2">
                    <div class="expertEdit_name">上课资料：</div>
                  </a-col>
                  <a-col :span="22">
                    <file-link :fileList="item.fileArrays"></file-link>
                  </a-col>
                </a-row>
              </a-collapse-panel>
            </a-collapse>
            <empty v-else description="暂无上课历史"></empty>
          </div>
        </div>
      </a-card>
      <!-- 页脚操作栏 -->
      <div
        class="btn_box page-btn-right-top"
        style="position: fixed; bottom: 0; right: 50px; height: 50px; display: flex; align-items: center"
      >
        <a-button type="primary" @click="$multiTab.close()">关闭</a-button>
      </div>
    </a-spin>
    <!-- 添加上课历史表单弹窗 -->
    <dialog-history
      ref="dialogHistory"
      headerTitle="新增上课历史"
      :visible.sync="visibleHistory"
      :form="{ id: id }"
      @confirm="submitHistoryForm"
      :width="700"
    ></dialog-history>
  </base-breadcrumb>
</template>

<script>
// import { STable } from '@/components' // 表格
import { employees, lesson } from '@/api/quality/safe' // api
import { Empty, Collapse } from 'ant-design-vue' // ant
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import dialogHistory from '@/views/quality/securityPerson/expert/dialogHistory.vue' // 表单弹窗
import cloneDeep from 'lodash.clonedeep' // 深拷贝

export default {
  name:'a'+ Date.now(),
  extends: new BaseEditPage(),
  components: {
    // STable,
    Empty,
    dialogHistory,
    ACollapse: Collapse,
    ACollapsePanel: Collapse['Panel'],
  },
  computed: {
    // 员工信息列表
    employeesInfoList() {
      let employeesInfo = this.employeesInfo
      return [
        {
          name: '员工名称：',
          value: employeesInfo.employeeName,
        },
        {
          name: '性别：',
          value: employeesInfo.sex,
        },
        {
          name: '员工编号：',
          value: employeesInfo.employeeNo,
        },
        {
          name: '职务：',
          value: employeesInfo.post,
        },
        {
          name: '电话号码：',
          value: employeesInfo.phone,
        },
        {
          name: '职称：',
          value: employeesInfo.title,
        },
        {
          name: '第一学历：',
          value: employeesInfo.firstEducation,
        },
        {
          name: '专业：',
          value: employeesInfo.specialitie,
        },
        {
          name: '第二学历：',
          value: employeesInfo.secondEducation,
        },
        {
          name: '生日：',
          value: employeesInfo.birthday,
        },
        {
          name: '状态：',
          value: employeesInfo.status,
        },
        {
          name: '身份证：',
          value: employeesInfo.card,
        },
      ]
    },
  },
  data() {
    return {
      isExpert: false, // 是否是专家组
      spinning: false, // 加载中
      visibleHistory: false, // 上课历史弹窗控件
      activeKey: [], // 上课历史展开项
      customStyle: 'background: #fff;border-radius: 4px;margin:0;border: 0;overflow: hidden',
      classHistories: {}, // 上课历史
      employeesInfo: {}, // 员工信息
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.spinning = true
      employees
        .getDetail({
          id: this.id,
        })
        .then((res) => {
          this.spinning = false
          if (res.code == 200) {
            this.activeKey = res.data.classHistories.map((item) => item.id)
            this.employeesInfo = res.data.employeesInfo
            this.classHistories = res.data.classHistories
          }
        })
        .catch((res) => {
          this.spinning = false
        })
    },
    // 提交上课历史表单
    submitHistoryForm(e) {
      let that = this
      lesson
        .update(e)
        .then((res) => {
          that.$refs.dialogHistory.loading = false
          // if (res.data.code == 200 || res.code == 200) {
          that.$message.success('添加成功！')
          this.init()
          that.visibleHistory = false
          // } else {
          //   that.$message.warning('添加失败！')
          // }
        })
        .catch((res) => {
          that.$refs.dialogHistory.loading = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
.expertEdit_box {
  padding: 12px 0;
  .expertEdit_name {
    color: #989898;
  }
  .expertEdit_desc {
    color: #666666;
  }
}
/deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding-left: 16px;
  padding-right: 16px;
  background: #f2f2f2;
}
/deep/ .ant-form-item {
  margin-bottom: 20px;
  .ant-form-item-label {
    padding-top: 9px;
  }
}
</style>